<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
    }
    .animated-banner {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: hidden
    }

    .layer {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    img {
        width: 1950px;
            height: 178px;
    }
    .bili-banner {
        position: relative;
            top: 0;
            width: 1950px;
            height: 178px;
            overflow: hidden;
    }
</style>

<body>
    <div class="bili-banner" style="" data-v-38a4badd="">
        <div data-v-0a487de8="" data-v-38a4badd="" class="animated-banner">
            <div class="layer" ><img  id="forest" src="https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png"
                    data-height="250"  data-width="3000" height="250" width="3000"
                    style="filter: blur(4px); transform: translate(0px, 0px) rotate(0deg);"></div>
            <div class="layer"><img id="big-person"  src="https://i0.hdslb.com/bfs/vc/082e39ef757826401ef82da818310d42e05bc2de.png"
                    data-height="275" data-width="3000" height="165" width="1800"
                    style="transform: translate(0px, 0px) rotate(0deg); filter: blur(0px);"></div>
            <div class="layer"><img id="hill" src="https://i0.hdslb.com/bfs/vc/dbd5c17c4315714de9e4ee119694d2e9efaf9639.png"
                    data-height="250" data-width="3000" height="250" width="3000"
                    style="transform: translate(-50px, 0px) rotate(0deg); filter: blur(1px);"></div>
            <div class="layer"><img id="leaves" src="https://i0.hdslb.com/bfs/vc/cd9be0a2716adbae85fd899259381c4b2c2893c7.png"
                    data-height="250" data-width="3000" height="150" width="1800"
                    style="transform: translate(0px, 4.2px) rotate(0deg); filter: blur(4px);"></div>
            <div class="layer"><img id="small-person" src="https://i0.hdslb.com/bfs/vc/88537437a7916ecde847fa46652b44fbd3cbbb06.png"
                    data-height="275" data-width="3000" height="165" width="1800"
                    style="transform: translate(0px, -1.8px) rotate(0deg); filter: blur(5px);"></div>
            <div class="layer"><img id="left" src="https://i0.hdslb.com/bfs/vc/37d9a93baa55870506a6f3e6308e7a0c386b97c7.png"
                    data-height="275" data-width="3000" height="178" width="1950"
                style="filter: blur(6px); transform: translate(0px, 0px) rotate(0deg);"></div>
        </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>

       var layerConfig = JSON.parse('[\
                                {"images":[{"src":"https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png"}],"initial":{"blur":4}},\
                                {"images":[\
                                {"src":"https://i0.hdslb.com/bfs/vc/082e39ef757826401ef82da818310d42e05bc2de.png","duration":5000},\
                                {"src":"https://i0.hdslb.com/bfs/vc/ddad7c909e4c2cf933473e971373d825e6f06519.png","duration":60},\
                                {"src":"https://i0.hdslb.com/bfs/vc/173eafe211b4671e5aff059a1834f3e4579c7a5d.png","duration":200},\
                                {"src":"https://i0.hdslb.com/bfs/vc/f1892bc119b722c3cda5b26269c292a90a9f5f06.png","duration":60}],"initial":{"blur":0}},\
                                {"images":[{"src":"https://i0.hdslb.com/bfs/vc/dbd5c17c4315714de9e4ee119694d2e9efaf9639.png"}],"initial":{"translate":[-50,0],"blur":1}},\
                                {"images":[{"src":"https://i0.hdslb.com/bfs/vc/cd9be0a2716adbae85fd899259381c4b2c2893c7.png"}],"initial":{"translate":[0,7],"blur":4}},\
                                {"images":[{"src":"https://i0.hdslb.com/bfs/vc/88537437a7916ecde847fa46652b44fbd3cbbb06.png"}],"initial":{"translate":[0,-3],"blur":5}},\
                                {"images":[{"src":"https://i0.hdslb.com/bfs/vc/37d9a93baa55870506a6f3e6308e7a0c386b97c7.png"}],"initial":{"blur":6}}]')

             // 区间限定函数
    function clamp(x, min, max) {
        if (x < min) return min;
        if (x > max) return max;
        return x;
    }
    t = document.getElementsByClassName(".layer"),
     // 鼠标移开还原
     t.handleMouseLeave = function () {
            layerConfig.forEach(function (t) {
                document.getElementById("forest").setAttribute("style", "filter: blur(" + layerConfig[0].initial.blur + "px); transform: translate(0px, 0px) rotate(0deg);");
                document.getElementById("big-person").setAttribute("style", "filter: blur(" + layerConfig[1].initial.blur + "px); transform: translate(0px, 0px) rotate(0deg);");
                document.getElementById("hill").setAttribute("style", "filter: blur(" + layerConfig[2].initial.blur + "px); transform: translate(" + layerConfig[2].initial.translate[0] + "px," + layerConfig[2].initial.translate[1] + "px) rotate(0deg);");
                document.getElementById("leaves").setAttribute("style", "filter: blur(" + layerConfig[3].initial.blur + "px); transform: translate(" + layerConfig[3].initial.translate[0] + "px," + layerConfig[3].initial.translate[1] + "px) rotate(0deg);");
                document.getElementById("small-person").setAttribute("style", "filter: blur(" + layerConfig[4].initial.blur + "px); transform: translate(" + layerConfig[4].initial.translate[0] + "px," + layerConfig[4].initial.translate[1] + "px) rotate(0deg);");
                document.getElementById("left").setAttribute("style", "filter: blur(" + layerConfig[5].initial.blur + "px); transform: translate(0px, 0px) rotate(0deg);");

            });

        },
           // 鼠标移动
           t.handleMouseMove = function (t) {
            var x = t.pageX;
            console.log("当前鼠标位置：", t.pageX);
           
            document.getElementById("forest").setAttribute("style", "filter: blur(" + clamp(x / 35, 0, 9) + "px); transform: translate(0px, 0px) rotate(0deg);");
            document.getElementById("big-person").setAttribute("style", "filter: blur(" + Math.abs(clamp(x / 75 - 7, -3, 7)) + "px); transform: translate(" + x / 50 + "px, 0px) rotate(0deg);");
            document.getElementById("hill").setAttribute("style", "filter: blur(" + Math.abs(clamp(x / 125 - 5, -5, 5)) + "px); transform: translate(" + x / 40 + "px, 0px) rotate(0deg);");
            document.getElementById("leaves").setAttribute("style", "filter: blur(" + Math.abs(clamp(x / 250 - 3, -7, 3)) + "px); transform: translate(" + x / 30 + "px, 0px) rotate(0deg);");
            document.getElementById("small-person").setAttribute("style", "filter: blur(" + clamp(5 - x / 250, 0, 5) + "px); transform: translate(" + x / 20 + "px, 0px) rotate(0deg);");
            document.getElementById("left").setAttribute("style", "filter: blur(" + clamp(6 - x / 250, 0, 6) + "px); transform: translate(" + x / 10 + "px, 0px) rotate(0deg);");
        },
        window.requestAnimationFrame(t.handleMouseMove),
        document.addEventListener("mouseleave", t.handleMouseLeave),
        window.addEventListener("mousemove", t.handleMouseMove)
                       
</script>
</html>